<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
	<style type="text/css">
	body {
		background: #ffffff;
	}
	.bg-dark {
		background: #333333 !important;
	}
	.aui-slide-node img {
	   	width: auto;
	    height: 100%;
	}
	</style>
</head>
<body>
	<div class="aui-content aui-padded-20">
		<p>优化说明：新增当前页（currentPage）回调及总页数获取；优化图片显示</p>
	</div>
	<div id="aui-slide">
		<div class="aui-slide-wrap" >
			<div class="aui-slide-node">
				<ul class="aui-grid-nine">
		            <li class="aui-col-xs-4 aui-text-center">
		                <span class="aui-iconfont aui-icon-edit aui-text-primary"></span>
		                <p>栏目</p>
		            </li>
		            <li class="aui-col-xs-4 aui-text-center">
		                <span class="aui-iconfont aui-icon-emoji aui-text-danger"></span>
		                <p>栏目</p>
		            </li>
		            <li class="aui-col-xs-4 aui-text-center">
		                <span class="aui-iconfont aui-icon-favor aui-text-warning"></span>
		                <p>栏目</p>
		            </li>
		            <li class="aui-col-xs-4 aui-text-center">
		                <span class="aui-iconfont aui-icon-phone aui-text-pink"></span>
		                <p>栏目</p>
		            </li>
		            <li class="aui-col-xs-4 aui-text-center">
		                <span class="aui-iconfont aui-icon-taxi aui-text-dark"></span>
		                <p>栏目</p>
		            </li>
		            <li class="aui-col-xs-4 aui-text-center">
		                <span class="aui-iconfont aui-icon-camera aui-text-info"></span>
		                <p>栏目</p>
		            </li>
		        </ul>
			</div>
			<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
				<div class="aui-content aui-padded-15">
					<span class="aui-text-danger">AUI Slide</span> 轮播组件不只局限于放置图片，可以自定义内容，分页样式有圆点(dot)，线条(line),结合AUI Flex来实现图片及内容的水平、垂直居中
				</div>
			</div>
			<div class="aui-slide-node aui-bg-warning aui-slide-node-middle aui-slide-node-center">
				<div class="aui-content aui-padded-15">
					<span class="aui-text-danger">AUI Slide</span>提供了常用的配置属性，可以自定义宽度，高度，自动播放，分页器样式等，支持无缝循环轮播
				</div>
			</div>
			<div class="aui-slide-node bg-dark">
				<img src="../image/l1.png" />
			</div>
			<div class="aui-slide-node bg-dark">
				<img src="../image/l2.png" />
			</div>
			<div class="aui-slide-node bg-dark">
				<img src="../image/l3.png" />
			</div>
			<div class="aui-slide-node aui-bg-warning">
				<img src="../image/demo5.png" />
			</div>
		</div>
		<div class="aui-slide-page-wrap"><!--分页容器--></div>
	</div>
	<div id="aui-slide2">
		<div class="aui-slide-wrap" >
			<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
				<div class="aui-content aui-padded-15">
					<span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
				</div>
			</div>
			<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
				<div class="aui-content aui-padded-15">
					<span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
				</div>
			</div>
		</div>
		<div class="aui-slide-page-wrap"><!--分页容器--></div>
	</div>
	<div id="aui-slide2">
		<div class="aui-slide-wrap" >
			<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
				<div class="aui-content aui-padded-15">
					<span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
				</div>
			</div>
			<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
				<div class="aui-content aui-padded-15">
					<span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
				</div>
			</div>
		</div>
		<div class="aui-slide-page-wrap"><!--分页容器--></div>
	</div>
	<div id="aui-slide3">
		<div class="aui-slide-wrap" >
			<div class="aui-slide-node bg-dark">
				<img src="../image/l1.png" />
			</div>
			<div class="aui-slide-node bg-dark">
				<img src="../image/l2.png" />
			</div>
			<div class="aui-slide-node bg-dark">
				<img src="../image/l3.png" />
			</div>
		</div>
		<div class="aui-slide-page-wrap"><!--分页容器--></div>
	</div>
</body>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript">
	var slide = new auiSlide({
		container:document.getElementById("aui-slide"),
		// "width":300,
		"height":260,
		"speed":300,
		"pageShow":true,
		"pageStyle":'dot',
		"loop":true,
		'dotPosition':'center',
		currentPage:currentFun
	})

	function currentFun(index) {
		console.log(index);
	}
	var slide2 = new auiSlide({
		container:document.getElementById("aui-slide2"),
		// "width":300,
		"height":240,
		"speed":300,
		"autoPlay": 0, //自动播放
		"pageShow":true,
		"loop":true,
		"pageStyle":'dot',
		'dotPosition':'center'
	})
	var slide3 = new auiSlide({
		container:document.getElementById("aui-slide3"),
		// "width":300,
		"height":240,
		"speed":500,
		"autoPlay": 3000, //自动播放
		"loop":true,
		"pageShow":true,
		"pageStyle":'line',
		'dotPosition':'center'
	})
	console.log(slide3.pageCount());
</script>
</html>